<template>
  <div class="bar-chart-container">
    <div ref="barChart" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BarChart',
  data() {
    return {
      chartData: {
        xAxisData: [], // 横轴数据
        seriesData: [] // 系列数据
      },
      colorList: ['#5cb0ff', '#5cd8ff', '#5cffd8', '#5cff9d'] // 不同系列的颜色
    };
  },
  mounted() {
    this.updateChartData();
    this.initChart();
  },
  watch: {
    dataList: {
      handler() {
        this.updateChartData();
        this.initChart();
      },
      deep: true
    }
  },
  props: ['dataList'],
  methods: {
    updateChartData() {
      this.chartData.xAxisData = this.dataList.map(item => item.UserName);

      // 准备四个系列的数据
      this.chartData.seriesData = [
        {
          name: '扫描数量',
          data: this.dataList.map(item => item.ScanNum)
        },
        {
          name: '出库商品数量',
          data: this.dataList.map(item => item.OutBillDetailNum)
        },
        {
          name: '移库商品数量',
          data: this.dataList.map(item => item.MoveNum)
        },
        {
          name: '上架商品数量',
          data: this.dataList.map(item => item.InUpStoreNum)
        }
      ];
    },
    initChart() {
      const myChart = echarts.init(this.$refs.barChart);

      const option = {
        title: {
          left: 'left',
          text: '人员KPI统计',
          textStyle: {
            color: '#333',
            fontSize: 16,
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: this.chartData.seriesData.map(item => item.name),
          right: 10,
          top: 18
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            color: '#333',
            interval: 0,
            rotate: 30,
            formatter: function(value) {
              if (value.length > 10) {
                return value.slice(0, 10) + '\n' + value.slice(10);
              }
              return value;
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        series: this.chartData.seriesData.map((series, index) => ({
          name: series.name,
          type: 'bar',
          barGap: 0, // 不同系列的柱间距离
          barCategoryGap: '20%', // 同一系列的柱间距离
          data: series.data,
          itemStyle: {
            color: this.colorList[index]
          },
          emphasis: {
            focus: 'series'
          }
        }))
      };

      myChart.setOption(option);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.bar-chart-container {
  width: 100%;
  height: 300px; /* 增加高度以适应更多数据和图例 */
}
</style>
